<template>
  <div class="add-form">
    <el-dialog title="题目预览" :visible.sync="dialogFormVisible">
      <div class="preview">
        <span class="tmsp"
          >【题型】:{{ questionTypeText(list.questionType) }}</span
        >
        <span class="tmsp">【编号】:{{ list.id }}</span>
        <span class="tmsp"
          >【难度】:{{ questionTypeDuff(list.difficulty) }}</span
        >
        <span class="tmsp">【标签】:{{ list.tags }}</span>
        <span class="tmsp">【学科】:{{ list.subjectID }}</span>
        <span class="tmsp">【目录】:{{ list.catalogID }}</span>
        <span class="tmsp">【方向】:{{ list.direction }}</span>
      </div>
      <hr />
      <div class="stem">
        <p>【题干】:<span v-html="list.question"></span></p>
        <p>选项: (以下选中的选项为正确答案)</p>
      </div>
      <hr />
      <div class="video">
        <span>【参考答案】:</span>
        <el-button @click="flag = true" type="danger">视频答案预览</el-button
        ><br />
        <video v-if="flag" :src="list.videoURL" controls></video>
      </div>
      <hr />
      <p>【答案解析】:{{ list.answerID }}</p>
      <hr />
      <p>【题目备注】:{{ list.remarks }}</p>
      <el-button type="primary" @click="dialogFormH" class="gbbtn"
        >关闭</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'CompanysAdd',
  props: {
    tableDataId: {
      type: Object
    }
  },
  async created () {
    // this.initData()
  },
  data () {
    return {
      dialogFormVisible: false,
      flag: false,
      list: {}
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    async initData (row) {
      const res = await detail(row)
      this.list = res.data
      console.log(res.data)
    },
    questionTypeText (questionType) {
      switch (questionType) {
        case '1':
          return '单选'
        case '2':
          return '多选'
        case '3':
          return '简答'
        default:
          return ''
      }
    },
    questionTypeDuff (questionType) {
      switch (questionType) {
        case '1':
          return '简单'
        case '2':
          return '一般'
        case '3':
          return '困难'
        default:
          return ''
      }
    }
  },

  mounted: function () {},
  // 创建完毕状态
  // 组件更新
  updated: function () {}
}
</script>
<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
.gbbtn {
  float: right;
  transform: translateY(-20px);
}
.preview {
  display: flex;
  flex-wrap: wrap;
}
.tmsp {
  margin-right: 160px;
  margin-bottom: 20px;
}
video {
  width: 500px;
  height: 350px;
}
</style>
